<script lang="ts">
  import { DeviceStatus } from "./type";

  export let status: DeviceStatus = DeviceStatus.normal;
</script>

<div class="h-full relative px-[20%]">
  <div class="w-full h-full bg {status} bg-center bg-no-repeat bg-contain" />
  <div
    class="absolute inset-0 img {status} bg-center bg-no-repeat bg-contain"
  />
</div>

<style>
  .bg.normal {
    background-image: url("./normal-bg.png");
    /*animation: fadein 4s infinite;*/
  }

  .bg.offline {
    background-image: url("./offline-bg.png");
    /*animation: fadein 4s infinite;*/
  }

  .bg.warning {
    background-image: url("./warning-bg.png");
    animation: fadein 2s infinite;
  }

  .bg.error {
    background-image: url("./error-bg.png");
    animation: fadein 2s infinite;
  }

  .img {
    margin: auto;
    height: 26%;
    width: 26%;
  }

  /* @media (min-height: 400px), screen and (orientation: portrait) {
    .img {
      margin: auto;
      height: 26%;
      width: 26%;
    }
  }
  @media (min-height: 760px), screen and (orientation: portrait) {
    .img {
      margin: auto;
      height: 26%;
      width: 26%;
    }
  } */
  .img.normal {
    background-image: url("./normal.png");
  }

  .img.offline {
    background-image: url("./offline.png");
  }

  .img.warning {
    background-image: url("./warning.png");
  }

  .img.error {
    background-image: url("./error.png");
  }

  @keyframes fadein {
    from {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
</style>
